<template>
  <div class="demo">
    <button @click="isShow=!isShow">显示/隐藏</button>
<!--    多个元素需要加group 并且需要加key-->
    <transition-group appear>
      <h2 v-show="isShow" key="1">{{ name }}</h2>
      <h2 v-show="isShow" key="2">{{ schoolName }}</h2>
    </transition-group>
  </div>
</template>

<script>
export default {
  name: "School2",
  data() {
    return {
      name: "你好啊",
      schoolName:'尚硅谷',
      isShow: true
    }
  }
}
</script>

<style scoped>
h2 {
  background-color: skyblue;
}
/*进入的终点*//*离开的起点*/
.v-enter,.v-leave-to{
  transform: translateX(-100%);
}
/*过程*/
.v-enter-active,.v-leave-active{
  transition: 0.5s linear;
}
/*进入的起点*//*离开的终点*/
.v-enter-to,.v-leave{
  transform: translateX(0);
}

/*!*进入的终点*!
.v-enter{
  transform: translateX(-100%);
}
!*进入的起点*!
.v-enter-to{
  transform: translateX(0);
}
!*离开的终点*!
.v-leave{
  transform: translateX(0);
}
!*离开的起点*!
.v-leave-to{
  transform: translateX(-100%);
}*/

</style>
